<!--
- Author:   .
- Date:    2017/7/18 0018.
- File:    list.
-->
<template>
  <div class="Web-Box"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="false"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false">
    <div class="combo_box" v-for="item in balconyList.data">
    <span @click="gotoGoodsDetail(item.goods_commonid)">
      <img :src="$config.website + $config.goodsImgSrc + item.face_image"></span>
    </div>
    <loading-more :allLoaded="balconyList.allLoaded" :show="balconyList.data.length > 0"></loading-more>
    <empty-data :show="balconyList.allLoaded && balconyList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        balconyList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getBalconyList(this.balconyList.page, this.balconyList.pageSize)
    },
    methods: {
      gotoGoodsDetail(goodsCommonid) {
        this.$router.push({name: 'goods-detail', params: {id: goodsCommonid}})
      },
      getBalconyList(page, pageSize) {
        this.balconyList.loading = true
        this.$request.getBalconyList(page, pageSize).then(data => {
          if (data.data.length < this.balconyList.pageSize) {
            this.balconyList.allLoaded = true
          }
          this.balconyList.data = [...this.balconyList.data, ...data.data]
        }).finally(() => {
          this.balconyList.requested = true
          this.balconyList.loading = false
        })
      },
      loadMore() {
        if (this.balconyList.loading || this.balconyList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getBalconyList(++this.balconyList.page, this.balconyList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>